2D Transformacije

Prijeđi mišem preko elementa da vidiš promjenu

U CSS-u, 2D transformacije omogućuju pomicanje, rotiranje, skaliranje i iskrivljavanje (skew) HTML elemenata na dvodimenzionalnoj ravnini pomoću svojstva transform.

Scale

Povećava ili smanjuje veličinu elementa.

transform: scale(1.5);

Translate

Pomiče element horizontalno (os X) i/ili vertikalno (os Y).

transform: translate(50px, 20px);

Transform Origin

Određuje točku oko koje se vrši promjena

transform-origin: top left;

Skew

Iskrivljuje element po X i/ili Y osi.

transform: skew(20deg, 10deg);

Rotate

Rotira element za zadani broj stupnjeva.

transform: rotate(45deg);

Kombiniranje transformacija

Više promjena može se kombinirati u jednoj naredbi.

transform: translate(30px, 0) rotate(45deg) scale(1.2);